<!--我的界面-->
<template>
  <div class="cell">
    <LImage class="img-logo bg3" :src="Config.img(item.iconUrl)"></LImage>

    <div class="all">
      <text class="font32 text2">{{item.taskName}}</text>
      <text class="font26 text3">{{item.explain}}</text>
  
      <div class="row" v-if="item.amount > 0">
        <div class="reward bg3">
          <text class="font24 text2">{{'+'+item.amount+item.coinType}}</text>
        </div>
      </div>

      <template v-if="item.totalProgress > 1">
        <div class="height20">

        </div>
        <div class="row acenter">
          <div class="bar width280 bg3">
            <div class="bar main1" :style="{'flex':item.progress/item.totalProgress}"></div>
          </div>
          <div class="width20"></div>
          <text class="font24 text3">{{item.progress+'/'+item.totalProgress}}</text>
        </div>
      </template>
    </div>

    <div class="but but-line no-b1" v-if="item.status == 'INCOMPLTE' || item.status == 'COMPLETING'" @click="butClick">
      <text class="font26 text2">{{T('去完成')}}</text>
    </div>
    <div class="but bg3" v-else-if="item.status == 'REWARDED' || item.type == 'COMMON'">
      <text class="font26 text3">{{T('已完成')}}</text>
    </div>
    <div class="but main1" v-else @click="butClick">
      <text class="font26 text1">{{T('领取奖励')}}</text>
    </div>

    <div class="line bg4"></div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.cell {
  flex-direction: row;
  align-items: center;
  padding: 30px;
}
.img-logo {
  width: 68px;
  height: 68px;
  margin-right: 20px;
}
.but {
  justify-content: center;
  align-items: center;

  min-width: 146px;
  height: 58px;
  border-radius: 29px;

  padding-left: 20px;
  padding-right: 20px;

  margin-left: 20px;
}
.but-line {
  border-width: 1px;
}
.reward {
  min-width: 112px;
  height: 34px;
  border-radius: 17px;

  padding-left: 10px;
  padding-right: 10px;

  margin-top: 6px;
}
.bar {
  flex-direction: row;
  height: 16px;
  border-radius: 8px;
}

.line {
  position: absolute;

  height: 1px;
  bottom: 0;
  left: 88;
  right: 0;
}
.width280{
  width: 280px;
}
</style>

<script>

import jconfig from "@/_js/config";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jdebug from "@/_js/debug";


import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {
  
  props:{
    item:{
      type:Object,
      default:undefined,
    },
  },

  data() {
    return {
      T: T,
      Config: jconfig,

    };
  },

  created() {
  },

  methods: {

    /********************* 点击*/
    butClick() {
      this.$emit("click", this.item);
    }
  },
};
</script>